:root{
    /*--bg1: #FFFFFF;*/
    /*--bg3: #F1F2F3;*/
    /*--text2: #61666D;*/
    /*--graph_bg_thick:#E3E5E7;*/
    /*--line_regular: #E3E5E7;*/
}

.rua-emoji-panel{
    font-family: PingFang SC, HarmonyOS_Regular, Helvetica Neue, Microsoft YaHei, sans-serif;
    font-weight: 400;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    top: var(--rua-panel-top);
    left: var(--rua-panel-left);
    width: 365px;
    border: 1px solid var(--graph_bg_thick);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text2);
    z-index: 99;
/*    test use, default value: 9*/
}

.rua-emoji-title{
    padding: 13px 15px 6px 15px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-color: var(--bg1);
}

.rua-emoji-content{
    height: 196px;
    padding: 0 11px;
    background-color: var(--bg1);
    overflow: auto;
}

.rua-emoji-tab{
    display: flex;
    position: relative;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background-color: var(--bg3);
}

.rua-emoji-tab *{
    box-sizing: border-box!important;
}

.rua-emoji-type{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 58px;
    height: 36px;
    padding: 7px 18px;
    cursor: pointer;
    user-select: none;
}

.rua-emoji-slider{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: absolute;
    right: 0;
    width: calc(365px - 58px * 5);
    height: 36px;
}

.rua-emoji-slider i{
    cursor: pointer;
}

.rua-emoji-type{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 58px;
    height: 36px;
    padding: 7px 18px;
    cursor: pointer;
}

.rua-emoji-type img{
    width: 22px;
    height: 22px;
}

.rua-current-type{
    background-color: var(--bg1);
}

.rua-normal-small-emoji{
    width: 24px;
    height: 24px;
    margin: 4px;
}

.rua-normal-large-emoji{
    width: 56px;
    height: 56px;
    margin: 4px;
}

.rua-text-emoji{
    padding: 5px 8px;
    line-height: 22px;
}

.rua-emoji-info{
    display: inline-block;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
}

.rua-emoji-info:hover{
    background: var(--line_regular);
}

.rua-emoji-panel-bottom{
    position: fixed;
}

.rua-disabled-text{
    position: absolute;
    color: #555;
    top: 0;
    line-height: 68px;
    text-align: center;
    width: 100%;
    max-height: 64px;
    overflow: hidden;
}

.rua-arrow{
    color: var(--c1c9b008);
    width: 16px;
    height: 16px;
}

.rua-arrow svg path{
    fill: currentColor;
}

/*html[emoji*="up"] .emoji-panel{*/
/*    display: none!important;*/
/*}*/

/*.emoji-box{*/
/*    display: none!important;*/
/*}*/